<!DOCTYPE HTML>
<html>
  <head>
    <title>web_im.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <style>
      	 .web_im {
      	 	 border:1px solid #838383;
      	 	 width:204px;
      	 	 height:526px;
      	 	 margin:0px auto;
      	}
      	.web_im .title {
      		 margin-top:8px;
      		 line-height:19px;
      		 height:19px;
      		 border-top:1px solid #9D9D9D;
      		 border-bottom:1px solid #939393;
      		 background-color: #EBEBEB;
        }
        .web_im .title h2 {
            padding-left:85px;
            font-size:12px;
			color:#2222FC;
        }
        .web_im .search {
            margin-top: 12px;
        }
        .web_im .search input {
            width:185px;
            height:19px;
            line-height:19px;
            margin-left: 5px;
            margin-right: 5px;
            border: 1px solid #959595;
        }
        .web_im .tabs{
           margin-top: 5px;
        }
        ul#tabnav{
		   padding-bottom:21px;
		   border-top:1px solid #CBCBCB;
		   border-bottom:1px solid #CBCBCB;	/* 菜单的下边框 */
	       font:12px verdana, arial;
       }
       ul#tabnav li{
		float:left;
		height:21px;
		width:67px;
		background-color:#D7D7D7;
		border-right:1px solid #A3A3A3;
      }
       ul#tabnav a:link, ul#tabnav a:visited{
		display:block;				
		text-decoration:none;
		padding:4px 8px 4px 8px;
     }
     
     ul#tabnav a:hover{
	  background-color:#ccc;
	  color:#000;
    }
    .web_im .friends{
        margin-top: 5px;
        height: 400px;
        overflow: auto;
    }
    .web_im .fold{
        height:25px;
        border-top: 1px solid #838383; 
    }
    .web_im .fold .fold_img{
        padding: 5px 70px 3px 85px;
    }
      </style>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
      // 测试选中的tab的索引值
          var selectIndex = null;
          $(function(){
            showTab(2);  
          })
         function showTab(index) {
            if(selectIndex != null) {
                $("#tab" + selectIndex).hide();
                $("#li" + selectIndex).css("background-color", "#D7D7D7").css("border-bottom", "1px solid #D7D7D7");
            }
             $("#tab" + index).show();
             $("#li" + index).css("border-bottom", "1px solid #FFFFFF").css("background-color", "#FFFFFF");
             selectIndex = index;
          }
      </script>
  </head>
  
  <body>
     <div class="web_im">
      	 <div class="title"><h2>好友</h2></div>
      	 <div class="search"><input type="text" id="name" name="name" value="" tabindex="测试"/></div>
      	 <div class="tabs">
      	    <ul id="tabnav">
      	        <li id="li1"><a href="#" onclick="showTab(1)">最近联系</a></li>
      	        <li id="li2"><a href="#" onclick="showTab(2)">在线好友</a></li>
      	        <li id="li3"><a href="#" onclick="showTab(3)">全部好友</a></li>
      	    </ul> 
      	 </div>
      	 <div class="friends">
      	    <div id="tab1" style="display:none;">
      	        1
      	    </div>
      	    <div id="tab2" style="display:none;">
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        <span style="display: block;padding-left: 10px;padding-bottom: 8px;cursor: pointer;">张三</span>
      	        
      	        </div>
      	    <div id="tab3" style="display:none;">
      	        3
      	    </div>
      	 </div>
      	 <div class="fold">
      	     <img class="fold_img" src="image/11.png " title="点击折叠"/>
      	 </div>
      </div>

  </body>
</html>
